<template>
  <div class="hello">
    <input type="text" v-model="text"><button @click="add">添加任务</button>
    <div >
      <todo-item :item="item" :filter ="filterFlag"  @on-change="changeState(item)" @on-del="del(index)" v-for="(item,index) in taskList" :key="index"/>
    </div>
    <div class="list-mt-20">
    <el-filter :item="item"  v-for="(item,index) in statusList" :key="index" @on-filter="filter(item.flag)"/>
    </div>
  </div>
</template>
<script>
import TodoItem from './TodoItem.vue'
import Filter from './Filter.vue'
export default {
  name: 'TodoList',
  data () {
    return {
      taskList: [],
      text: '',
      filterFlag: 'all',
      statusList: [
        {label: '全部', flag: 'all'},
        {label: '已完成', flag: 'completed'},
        {label: '未完成', flag: 'uncompleted'}
      ]
    }
  },
  components: {
    'todo-item': TodoItem,
    'el-filter': Filter
  },
  methods: {
    // 添加任务
    add () {
      this.taskList.push({text: this.text, done: false})
    },
    // 改变任务状态
    changeState (item) {
      item.done = !item.done
    },
    // 删除任务
    del (index) {
      this.taskList.splice(index, 1)
    },
    // 过滤任务列表
    filter (flag) {
      this.filterFlag = flag
    }
  }
}
</script>
<style scoped>
.list-mt-20{
  margin-top: 20px;
}
</style>
